<template>
  <div>
      <div class="person">
        <div class="avatar">
            <img :src="avatar" alt="">
        </div>
        <router-link to="/dist/My"><p class="nickname">{{name}}<span class="iconfont icon-Ge_YoujianT_Bai"></span></p></router-link>
      </div>
      <card>
      <div slot="content" class="card-demo-flex card-demo-content01">
        <div class="vux-1px-l vux-1px-r">
          <router-link to="/dist/Cash"><span>{{balance}}元</span>
          <br/>
          <span class="iconfont icon-Ge_YuE" style="color:#00aaff;"></span>余额</router-link>
        </div>
        <div class="vux-1px-r">
          <router-link to="/dist/Packet"><span>0张</span>
          <br/>
          <span class="iconfont icon-Ge_Hongbao"></span>红包</router-link>
        </div>
        <div class="vux-1px-r">
          <router-link to="/dist/Card"><span>0张</span>
          <br/>
          <span class="iconfont icon-Ge_YouhuiJ" style="color:#ffb900;"></span>优惠券</router-link>
        </div>
      </div>
    </card>
     <personlist></personlist>

     <div class="kefu"><a href="tel:027-59203156">客服电话：027-59203156</a></div>
     <div class="sercive-time">服务时间:9:30-18:00</div>
     <Tabbar></Tabbar>
  </div>
</template>

<script>
import { Divider, Card } from 'vux'
import Tabbar from 'components/common/Tabbar'
import Personlist from 'components/person/Personlist'

export default {
  components: {
    Card,
    Divider,
    Personlist,
    Tabbar
  },
  data:function(){
    return {
      phone:null,
      name:null,
      balance:null,
      avatar:null,
    }
  },
  created() {
    let openid = JSON.parse(localStorage.getItem('openid'));
    this.$http.get('/api/wx/user',{params:{'openid':openid}}).then(function(res){
      let data = res.body.data;
      this.phone  = data.phone;
      this.name  = data.name;
      this.balance  = data.balance*0.01;
      this.avatar = data.avatar;
    });
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
.person{
  height:200px;
  padding-top:28px;
  background:url('/dist/static/img/p.png') no-repeat;
  background-size:100% 120%; 
}
.avatar{
  height: 8.6rem;
  width: 8.6rem;
  margin: 0 auto;
  border-radius: 50%;
  /* box-shadow: 0px 0px 10px #dd3d3d; */
  border:8px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.avatar img{
  height: 100%;
  width: auto;
}
.nickname{
  color: #fff;
  font-size: 15px;
  text-align: center;
  margin-top: 14px;
}
.sercive-time{
  margin-top:16px;
  margin-bottom:70px;
  text-align:center;
  color:#ccc;
  font-size:11px;
}
.weui_panel {
  margin-top:0px;
}
.vux-1px-r a{
  font-size:16px!important;
  color:#3f3f3f;
}
.vux-1px-r .iconfont{
  margin-right:0.6rem;
}
.kefu{
  padding: 14px 15px 10px;
  font-size: 12px;
  text-align:center;
  margin-top:8px;
  background-color:#fff;
}
.kefu a{
  color: #ff4d4d;
}
.nickname .iconfont{
  font-size:14px;
}
</style>